<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">费用项目标准</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增费用项目标准</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="120">
          <template scope="s">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="dialogOpen('PUT', s.row)" round></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="tableDelete(s.row)" round></el-button>
          </template>
        </el-table-column>
        <el-form-item label="费用项目" prop="bxCoststandardName">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxCoststandardName"
                    placeholder="费用项目名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="会计科目" prop="bxCoststandardSubject">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bxCoststandardSubject"
                    placeholder="会计科目" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        -->
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}费用项目标准 <span v-if="dialog.title === '修改'">费用项目标准名称：{{dialog.row.bxSetlecycleName}}</span></p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="bxCoststandardName" label="费用项目名称">
              <el-input
                type="text"
                v-model="formDialog.bxCoststandardName"
                placeholder="费用项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="bxCoststandardSubject" label="会计科目">
              <el-input
                type="text"
                v-model="formDialog.bxCoststandardSubject"
                placeholder="会计科目"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item prop="bxCoststandardNotes" label="备注">
              <el-input
                type="textarea"
                :rows="2"
                v-model="formDialog.bxCoststandardNotes"
                placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      id: { value: '', rule: [], cRemarks: '' },
      bxCoststandardName: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxCoststandardSubject: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bxCoststandardNotes: { value: '', rule: [], cRemarks: '' },
    };
  }
  export default AutoVue({
    data: {
      table: {
        column: [
          { label: '费用项目名称',
            prop: 'bxCoststandardName',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '会计科目',
            prop: 'bxCoststandardSubject',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '备注',
            prop: 'bxCoststandardNotes',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '更新时间',
            prop: 'updateDate',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 6);
            },
            minWidth: '0px',
            cRemarks: '不用填写',
            search: false },
          {
            label: '更新人',
            prop: 'updateUser',
            minWidth: '0px',
            cRemarks: '不用填写',
            search: false,
          },
        ],
        key: 'id',
        url: '/coststandard/searchByPage',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        user_lx: [],
        row: {},
        tree: [],
      },
    },
    transition: 'slide-fade-bottom',
    head: {
      'title': '费用项目标准',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 资源管理 查看费用项目标准' },
      ],
    },
    store: [],
    methods: {
      tableDelete (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将删除费用项目标准。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          await this.del('/coststandard', {
            data: ids});
          this.tableWatch(tableRef);
        });
      },
      dialogInit () {
        this.dialog.row = {};
        this.dialog.title = '新增';
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.post('/coststandard', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.put('/coststandard', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
